<template>
  <div>
    <!-- <template #headerTitle>
      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
      <span> {{ getTitle.value }} </span>
    </template> -->
    <div style="background: #fff;height: 100vh;overflow: scroll;">
      <div style="display: flex;justify-content: center;margin-bottom: 10px;">
        <div class="container">
          <div v-if="!flag" style="display:flex;align-items: center;height: 100%;">
            <img style="width: 100%;" src="../../../assets/images/nullShop.png">
          </div>
          <div v-if="flag">
            <!-- <div style="text-align: center;margin-bottom: 10px;">产品验真</div> -->
            <el-carousel height="300px" style="background: #fff;border-radius: 5px;">
              <!-- <el-carousel-item v-for="(item, index) in props.data.data" :key="index">
                  <img :src="item.url">
              </el-carousel-item> -->
              <el-carousel-item>
                <img style="width: 100%;" src="../../../assets/images/header.jpg">
              </el-carousel-item>
              <el-carousel-item>
                <img style="width: 100%;" src="../../../assets/images/mp.png">
              </el-carousel-item>
              <el-carousel-item>
                <img style="width: 100%;" src="../../../assets/images/logo.png">
              </el-carousel-item>
            </el-carousel>
            <div style="background: #fff;padding: 10px;margin-top: 10px;">
              <div style="font-weight: bold; font-size: 16px; margin-bottom: 10px">产品基本信息</div>
              <p><span style="display: inline-block;width: 90px;color: #aaa;">产品名称：</span>臻高壮bl-11定制中盒（橙）</p>
              <p><span style="display: inline-block;width: 90px;color: #aaa;">规格型号：</span>12ml/瓶x10盒x12箱</p>
              <p><span style="display: inline-block;width: 90px;color: #aaa;">生产日期：</span>2025/2/26</p>
              <p><span style="display: inline-block;width: 90px;color: #aaa;">批次：</span>123456789</p>
            </div>
            <div style="margin-top: 10px;border-radius: 5px;">
              <!-- <img style="width: 100%;" src="../../../assets/images/header.jpg" > -->
              <img style="width: 100%;" src="../../../assets/images/mp.png">

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup name="AccountModPwd">
  import { computed,ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Icon } from '/@/components/Icon';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { infoSavePwd } from '/@/api/sys/user';
  import { useUserStore } from '/@/store/modules/user';
  import { PageEnum } from '/@/enums/pageEnum';
  import { Alert } from 'ant-design-vue';
  import { publicPath } from '/@/utils/env';

  const userStore = useUserStore();
  const { t } = useI18n();
  const { showMessage, createSuccessModal } = useMessage();
  const getTitle = {
    icon: 'i-simple-line-icons:basket-loaded',
    value: '产品验真',
  };
  let flag = ref(true)

</script>
<style>
  /* 默认样式 */
  .container {
    width: 400px;
    border-radius: 5px;
    background: #eee;
    padding: 10px;
    min-height: 700px;
  }

  /* 在小屏幕上调整样式 */
  @media (max-width: 768px) {
    .container {
      width: 100%;
      padding: 10px;
      background: #eee;
    }
  }
</style>